<template>
    <div>
        <el-container>
            <el-header style="background-color: rgb(255, 255, 255) ;height: 50%;">
                <el-table
                    :data="tableDomain"
                    style="width: 100%">
                    <el-table-column
                        prop="domainID"
                        label="域ID"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="domainName"
                        label="域名"
                        width="180">
                    </el-table-column>

                    <el-table-column
                        prop="domainPk"
                        label="域公钥"
                        width="300">
                    </el-table-column>

                    <el-table-column
                        label="状态(离线/在线)">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.state === '1' ? '1' : '0'" placement="top">
                                <el-icon
                                :class="getIconClass(scope.row.state)"
                                :style="{ color: getIconColor(scope.row.state) }"
                                ></el-icon>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                </el-table>
            </el-header>

            <el-main>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="NI"
                        label="唯一资源标识符"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        prop="domainID"
                        label="数据域"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="userID"
                        label="数据来源"
                        width="180">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="downloadDate(scope.row)" type="text" size="small">下载</el-button>
                    </template>
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>

    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableDomain: [{
          domainId: '1',
          domainName: 'A',
          domainPk: '0x32134',
          state: '1'
        },{
          domainId: '2',
          domainName: 'B',
          domainPk: '0x32134',
          state: '0'
        }],
        tableData: [{
          date: '2016-05-02',
          domainID: 'A',
          userID: '0x231a321b',
          NI: '0x4324234',
        },{
          date: '2016-05-03',
          domainID: 'A',
          userID: '0x231a321b',
          NI: '0xfdsfsfd',
        }],
      }
    },
    methods: {
    getIconClass(state) {
      return state === '1' ? 'el-icon-circle-check' : 'el-icon-circle-close';
    },
    getIconColor(state) {
      return state === '1' ? 'green' : 'red';
    },
    downloadDate(row) {
        console.log(row);
      }
    },
  }
</script>